Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui] Prevent ownerState propagation for transition slots #44401

Open
wants to merge 15 commits into
base: master
Choose a base branch
from

Conversation

ZeeshanTamboli
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli commented Nov 13, 2024

Found this while investigating an issue—check the console error about ownerState.

Before: Sandbox
After: Sandbox

You can also see it in the local Accordion docs at http://localhost:3000/material-ui/react-accordion/.

The workaround in #40418 was removed in favor of #41187, but #41187 doesn’t handle custom transition slots like Fade and Zoom.

This PR introduces a new shouldAppendOwnerState option in useSlot, preventing ownerState from being appended unnecessarily, instead of appending and then removing it.

@ZeeshanTamboli ZeeshanTamboli added the package: material-ui Specific to @mui/material label Nov 13, 2024
@mui-bot
Copy link

mui-bot commented Nov 13, 2024

Netlify deploy preview

https://deploy-preview-44401--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 7ea5845

@ZeeshanTamboli ZeeshanTamboli changed the title [material-ui] Remove ownerState propagation in accordion transition slot [material-ui] Remove ownerState propagation for transition slots Nov 13, 2024
@ZeeshanTamboli ZeeshanTamboli marked this pull request as ready for review November 13, 2024 12:07
@ZeeshanTamboli ZeeshanTamboli added bug 🐛 Something doesn't work regression A bug, but worse labels Nov 13, 2024
@ZeeshanTamboli ZeeshanTamboli changed the title [material-ui] Remove ownerState propagation for transition slots [material-ui] Prevent ownerState propagation for transition slots Nov 13, 2024
Co-authored-by: Olivier Tassinari <[email protected]>
Signed-off-by: Zeeshan Tamboli <[email protected]>
@DiegoAndai
Copy link
Member

Hey @ZeeshanTamboli, thanks for working on this.

We do want the ownerState to be available for the transition slots. That way, users can consume it when building their custom transitions. The responsibility of filtering ownerState would be on the developer.

The fix here should be to filter out the ownerState inside the Fade and Zoom components. Because those are our transition components, the responsibility of not forwarding ownerState incorrectly should be handled on each one. Does this make sense?

@ZeeshanTamboli
Copy link
Member Author

ZeeshanTamboli commented Nov 19, 2024

Hey @ZeeshanTamboli, thanks for working on this.

We do want the ownerState to be available for the transition slots. That way, users can consume it when building their custom transitions. The responsibility of filtering ownerState would be on the developer.

The fix here should be to filter out the ownerState inside the Fade and Zoom components. Because those are our transition components, the responsibility of not forwarding ownerState incorrectly should be handled on each one. Does this make sense?

Oh, I thought the ownerState passed to the slotProps callback through resolveComponentProps in useSlot was sufficient. For example:

slotProps={{ transition: ({ expanded }) => (expanded ? 300 : null) }}

For non-transition slots, I assumed ownerState was appended for use in the styled API for styling.

Is that not the case?

The responsibility of filtering ownerState would be on the developer.

Do we document this somewhere?

@DiegoAndai
Copy link
Member

DiegoAndai commented Nov 19, 2024

Oh, I thought the ownerState passed to the slotProps callback through resolveComponentProps in useSlot was sufficient.

For non-transition slots, I assumed ownerState was appended for use in the styled API for styling.
Is that not the case?

Both of these are useful, but IMO don't cover all use cases. Making the parent's ownerState available as a prop provides more flexibility. There's also an argument for not providing the ownerState but only certain properties of it. This is another thing we need to decide regarding the slot pattern cc: @siriwatknp

Do we document this somewhere?

No. Documentation about slots could and should be much better. We're working on improving that, but first, we want to implement the missing slots throughout the components.

@ZeeshanTamboli
Copy link
Member Author

@DiegoAndai What's your take on the recent pushed change to destructure ownerState?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work package: material-ui Specific to @mui/material regression A bug, but worse
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants